<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import ReCol from "@/components/ReCol";
import { FormProps } from "./logic/types";
import { rules, initValues } from "./logic/form";

const { t } = useI18n();
const props = withDefaults(defineProps<FormProps>(), {
  formData: () => initValues()
});

const formRef = ref();
const formData = ref(props.formData);

const getRef = () => formRef.value;
defineExpose({ getRef });
</script>

<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="82px">
    <el-row :gutter="30">
      <re-col :xs="24" :sm="24">
        <el-form-item :label="t('sys.rolePage.form.name')" prop="name">
        <el-input
          v-model="formData.name"
          show-word-limit
          maxlength="30"
          clearable
          :placeholder="t('sys.rolePage.form.placeholder.name')"
        />
      </el-form-item>
      </re-col>
      <re-col :xs="24" :sm="24">
        <el-form-item :label="t('sys.rolePage.form.code')" prop="code">
          <el-input
            v-model="formData.code"
            show-word-limit
            maxlength="30"
            clearable
            :placeholder="t('sys.rolePage.form.placeholder.code')"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
